<template>
  <uni-nav-bar title="科普" @clickLeft="back"/>
  <view>
    <!-- 顶部提示 -->
    <tui-tips ref="toast"></tui-tips>

    <uni-list>
      <!-- title、note设置标题和小文字 -->
      <uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.newName"
                     :note="item.newTitle + ' '+item.newDate" class="list">

        <!-- 通过v-slot:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
        <template v-slot:header>
          <!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
          <image class="image-1" :src="item.newAvatar" mode="aspectFill"></image>
        </template>
      </uni-list-item>
    </uni-list>
  </view>

  <view style="height: 100px;"></view>
  <Footer></Footer>
</template>

<script>
import Footer from '@/component/footer/footer.vue'

export default {
  components: {
    Footer
  },
  data() {
    return {
      statusLoadMore: "more", //more,loading,nomore
      info: []
    }
  },
  created() {
    this.getDate()
  },
  methods: {
    getDate() {
      uni.request({
        url: "http://localhost:9999/nbb/New/getAll",
        method: 'GET',
        header: {
          'Authorization': uni.getStorageSync('Authorization'),
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {},
        success: (res) => {
          console.log(res)
          if (res.data.code == 200) {
            console.log("调用life成功");
            this.info = res.data.data
          } else {
            console.log("调用life失败");
            console.log(res.data);
          }
        },
        fail() {
          console.log("请求life失败");
        }


      })
    },
  }
}
</script>

<style>
::v-deep .uni-nav-bar-text {
  font-size: 20px;
}

body {
  background: #F3F3F3;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-1 {
  flex-shrink: 0;
  margin-right: 10px;
  width: 125px;
  height: 75px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px #F3F3F3 solid;
}

.list {
  margin-bottom: 20px;
  padding-top: 20px;
}

::v-deep.list {
  margin-bottom: 20px !important;
  border-radius: 30px!important;
  /*background: red !important;*/
}
</style>